<template>
	<view>
		<u-toast ref="uToast" />
		
		<view v-if="loading || error" class="loading_view">
		  <u-loading mode="circle" v-if="loading && !error" size="50"></u-loading>
		  <view class="messgae">
			{{ error?'加载失败':'加载中...' }}
			<view class='message_btn' v-if="error"><u-button @click="goback">返回</u-button></view>
		  </view>
		 </view>
		
		<view v-else>
			
		<view class="head">
			<view class="user_head">
				<view class="img" @click="onImage" :data-src="user.u_icon">
					<image :src="user.u_icon"></image>
				</view>
				<view class="right">
					<view class='name'>
						<text class="hg" v-if="user.u_supremeTime==1">{{user.u_nickname}}</text>
						<text class="hy" v-else-if="user.u_memberTime==1">{{user.u_nickname}}</text>
						<text v-else>{{user.u_nickname}}</text>
						<image src="../../static/image/hg.png" v-if="user.u_supremeTime==1"></image>
						<image src="../../static/image/hy.png" v-else-if="user.u_memberTime==1"></image>
					</view>
					<view class='like' @click="onFollow">
						<u-tag v-if="isFollow==1" text="已喜欢" mode="plain" type='info' shape='circle'/>
						<u-tag v-else text="喜欢" bg-color="#EA4389" color="#fff" mode="plain" shape='circle'/>
					</view>
					<view class='other'>
						<text class='age'>{{info.u_age}}</text>
						<text class='xz'>{{info.u_star}}</text>
					</view>
				</view>
				
				<view class='auth'>
					<view class='auth_list'>
						<view><image src="../../static/info_icon/info_tel_s.png"></image></view>
						<view>手机认证</view>
					</view>
					<view class='auth_list'>
						<view>
							<image v-if="user.u_realName==1" src="../../static/info_icon/info_sm_s.png"></image>
							<image v-else src="../../static/info_icon/info_sm.png"></image>
						</view>
						<view>实名认证</view>
					</view>
					<view class='auth_list'>
						<view>
							<image v-if="user.u_icon_prove==1" src="../../static/info_icon/info_user_s.png"></image>
							<image v-else src="../../static/info_icon/info_user.png"></image>
						</view>
						<view>头像认证</view>
					</view>
					<view class='auth_list'>
						<view>
							<image v-if="user.u_education==1" src="../../static/info_icon/info_xl_s.png"></image>
							<image v-else src="../../static/info_icon/info_xl.png"></image>
						</view>
						<view>学历认证</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="user_hide"></view>
		
		<view class='user_cont'>
			<view class="cont_head">
				<image src='../../static/index_icon/requ.png'></image>
				<text>{{user.u_autograph}}</text>
			</view>
			<view class="cont_images">
				<image v-for="v in user.u_album" :src="v" @click="onImage" :data-src="v"></image>
			</view>
			
			<view class="cont_other">
				<view class='other_head'>基本资料</view>
				<view class='tags'>
					<view class='tag'>
						<uni-tag :text="info.u_sex==1?'男':'女'" :circle="true"></uni-tag>
					</view>
					<view class='tag'>
						<uni-tag :text="info.u_height+'cm'" :circle="true"></uni-tag>
					</view>
					<view class='tag'>
						<uni-tag :text="'属'+info.u_animals" :circle="true"></uni-tag>
					</view>
					<view class='tag'>
						<uni-tag :text="info.u_city" :circle="true"></uni-tag>
					</view>
					<view class='tag'>
						<uni-tag :text="info.u_salary" :circle="true"></uni-tag>
					</view>
					<view class='tag'>
						<uni-tag :text="education[info.u_education]" :circle="true"></uni-tag>
					</view>
					<view class='tag'>
						<uni-tag :text="marriage[info.u_marriage]" :circle="true"></uni-tag>
					</view>
				</view>
				<view class="clear"></view>
			</view>
			
			<view class="cont_other">
				<view class='other_head'>择偶要求</view>
				<view class='tags'>
					<view class='tag' v-for="v in need"><uni-tag :text="v" :circle="true"></uni-tag></view>
				</view>
				<view class='tags' v-if="need.length==0">
					<view class='tag'><uni-tag text="回头告诉你" :circle="true"></uni-tag></view>
				</view>
				<view class="clear"></view>
			</view>
			
			<view class="cont_other" v-if="hobby">
				<view class='other_head'>兴趣爱好</view>
				<view class='tags'>
					<view class='tag' v-for="v in hobby">
						<uni-tag :text="v.h_name" :circle="true"></uni-tag>
					</view>
				</view>
				<view class="clear"></view>
			</view>
		</view>
		
		<view class="btn_hidden"></view>
		
		<view class='user_btn'>
			<view class='lt' @click="onUrl" data-url="/pages/message_details/message_details?id=" :data-get="user.u_id">
				<image src='../../static/info_icon/info_lt.png'></image>
				<view>聊天</view>
			</view>
			<view class='hn' @click="onFollow">
				<image src='../../static/info_icon/info_hn.png'></image>
				<view v-if="isFollow==1">取消喜欢</view>
				<view v-else>喜欢{{info.u_sex==1?'他':'她'}}</view>
			</view>
		</view>
		
		</view>
		<u-mask :show="imageShow" @click="imageShow = false">
			<view class='image'>
				<image :src="image"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				id:null,
				user:null,
				info:null,
				hobby:null,
				need:null,
				isFollow:0,
				loading:true,
				error:false,
				education:['未选择','高中','中专','大专','本科','硕士','博士'],
				marriage:['','未婚','已婚','重婚'],
				imageShow:false,
				image:''
			}
		},
		onLoad(e){
			var id=typeof(e.id);
			
			if(id=='undefined'){
				uni.navigateBack({
				    delta: 1
				});
			}
			
			this.id=Number(e.id);
		},onShow(){
			var that=this;
			
			this.$request({
				url:"/user/show",
				data:{id:this.id},
				success(res){
					if(res.data.code==1){
						that.user=res.data.data.user;
						
						that.info=res.data.data.info;
						
						that.hobby=res.data.data.hobby;
						
						that.need=res.data.data.need;
						
						that.isFollow=res.data.data.isFollow;
						
						that.loading=false;
					}else{
						that.$refs.uToast.show({
							title:res.data.msg,
							type:'warning',
							url:'/pages/edge/edge',
							isTab:true
						});

						that.error=true;
					}
				},fail(res){
					that.$refs.uToast.show({
						title: '网络繁忙',
						type:'warning'
					});
					
					that.error=true;
				}
			})
		},methods:{
			onUrl(e){
				var url=e.currentTarget.dataset.url;
				
				var get=e.currentTarget.dataset.get;
				
				uni.navigateTo({
				    url: url+get
				});
			},
			onImage(e){
				var src=e.currentTarget.dataset.src;
				
				this.image=src;
				
				this.imageShow=true;
			},
			goback(){
				uni.navigateBack({
				    delta: 1
				});
			},
			onFollow(){
				var that=this;
				
				this.$request({
					url:'/user/follow',
					data:{isFollow:this.isFollow,id:this.id},
					success(res){
						if(res.data.code==1){
							that.$refs.uToast.show({
								title: '操作成功',
								type:'success'
							});
							
							that.isFollow=that.isFollow==1?0:1;
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type:'error'
							});
						}
					},fail(res){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type:'warning'
						});
					}
				})
			}
		}
	}
</script>

<style scoped src="../../static/css/userInfo.css">
</style>

<style scoped>
	.image{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.image image{
		height:650rpx;
	}
</style>
